import React from 'react'
import {
	View,
	StyleSheet,
	ViewStyle,
	Text,
	TouchableOpacity,
	TextStyle,
	Image,
	ImageSourcePropType,
} from 'react-native'
import { translateSize, definedColors, themeColors } from 'styles'
import { Division } from 'components'
import { commonStyle } from 'styles'
import { operate } from '../services/authorization';

export interface InfoLayoutProps {
	title: string
	titlePrefix?: React.ReactElement
	titlePartner?: React.ReactElement
	content?: string
	style?: ViewStyle
	contentIcon?: ImageSourcePropType
	contentIconStyle?: ViewStyle
	contentView?: React.ReactElement
	hideDivier?: boolean
	smallFont?: boolean
	onContentPress?: () => void
}

const InfoLayout: React.FC<InfoLayoutProps> = props => {
	return (
		<View style={commonStyle.containerColumn}>
			<View style={[styles.container, props.style, props.smallFont ? styles.smallContainer : {}]}>
				<View style={styles.children}>
					{props.titlePrefix ? props.titlePrefix : <React.Fragment />}
					<Text style={[styles.title, props.smallFont ? { fontSize: translateSize(24) } : {}]}>
						{props.title}
					</Text>
					{props.titlePartner ? props.titlePartner : <React.Fragment />}
				</View>
				{props.content ? (
					<TouchableOpacity
						style={{ ...styles.children }}
						disabled={props.onContentPress ? false : true}
						onPress={() => {
							operate()
							props.onContentPress && props.onContentPress()
						}}>
						<Text style={[styles.content, props.smallFont ? { fontSize: translateSize(24) } : {}]}>
							{props.content}
						</Text>
						{props.contentIcon ? <Image source={props.contentIcon} style={props.contentIconStyle} /> : <React.Fragment />}
					</TouchableOpacity>
				) : (
						<React.Fragment />
					)}
				{props.contentView ? props.contentView : <React.Fragment />}
			</View>
			{props.hideDivier ? <React.Fragment /> : <Division />}
		</View>
	)
}

interface InfoLayoutStyle {
	container: ViewStyle
	smallContainer: ViewStyle
	children: ViewStyle
	title: TextStyle
	content: TextStyle
}

const styles = StyleSheet.create<InfoLayoutStyle>({
	container: {
		width: '100%',
		flexDirection: 'row',
		justifyContent: 'space-between',
		alignItems: 'center',
		paddingLeft: translateSize(64),
		paddingRight: translateSize(32),
		paddingTop: translateSize(32),
		paddingBottom: translateSize(32),
	},
	smallContainer: {
		paddingTop: translateSize(12),
		paddingBottom: translateSize(12),
	},
	children: {
		justifyContent: 'flex-end',
		flexDirection: 'row',
		alignItems: 'center',
	},
	title: {
		fontSize: translateSize(28),
		paddingRight: translateSize(10),
		color: definedColors.gray92,
	},
	content: {
		textAlign: 'right',
		fontSize: translateSize(28),
		color: themeColors.title,
	},
})

export default InfoLayout
